"use client";
import Image from "next/image";
import Script from "next/script";
import { Space } from "antd";
import MapChart from "./components/MapChart/index";
import Header from "./components/Header/index";
import CustomerStatistics from "./components/CustomerStatistics";
import { TrendChart } from "./components/TrendChart";
import { BarChart } from "./components/BarChart";
import Table from "./components/Table";
import { useAuth } from "@/app/cg06/hooks/useAuth";
import { useAuthWms } from "@/app/cg06/hooks/useAuthWms";
import styles from "./pages.module.scss";
import BottomLine from "./images/line5@2x.png";
import BottomLine2 from "./images/line6@2x.png";
import rightBg from "./images/right-bg.png";
// import '../web/page.scss';

export default function Page() {
  useAuth();
  useAuthWms();
  return (
    <div className={styles.main}>
      <Header />
      <div
        style={{
          height: "100vh",
          flexShrink: 0,
          paddingTop: 82,
          paddingLeft: 24,
          zIndex: 888,
          background: "transparent",
        }}
      >
        <Space direction="vertical" size={12}>
          <TrendChart title="近12个月采购金额累计趋势图" unit="单位：万元" />
          <BarChart title="在途库存分布" unit="单位：PCS" />
          <BarChart title="仓库库存分布" unit="单位：PCS" />
          <BarChart title="仓库出库分布" unit="单位：PCS" />
        </Space>
      </div>
      <div className={styles.globeChartBox}>
        <div className={styles.globeChart}>
          <CustomerStatistics />
          <MapChart />
          <Image
            src={BottomLine}
            width={968}
            height={5}
            alt="底部线条"
            style={{
              position: "absolute",
              bottom: 30,
              left: "50%",
              transform: "translateX(-50%)",
              width: "90%",
              height: "auto",
            }}
          />
        </div>
      </div>
      <div
        style={{
          height: "100vh",
          flexShrink: 0,
          paddingTop: 82,
          paddingRight: 24,
          zIndex: 888,
          background: "transparent",
        }}
      >
        <Space direction="vertical" size={12}>
          <TrendChart title="库存变化趋势图" subTitle="单位：PCS" />
          <TrendChart title="出库变化趋势图" subTitle="单位：PCS" />
          <Table title="采购单信息" />
        </Space>
      </div>
    </div>
  );
}
